[Android Tips] 2つの Android Bootstrap で爆速開発!

[Android Tips] 2つの Android Bootstrap で爆速開発!

Clock Icon2014.05.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Android Bootstrap

Bootstrap といえば Twitter Bootstrap が有名ですが、Android の世界では2つの Bootstrap があります。Android Bootstrap と Android Bootstrap です。そう、見事なまでにコンフリクトしております。どちらも Android のアプリ開発を高速化するためのツールですが、役割は違います。具体的に言うと、1つはデザインのアセットをいい感じに作ってくれるもの、もう一つはよく使いそうなライブラリをいい感じにセットにしてくれるものです。それぞれ、ちょっと気になっていたので軽く使ってみました。

デザインのアセットをサクッと作る

https://github.com/Bearded-Hen/Android-Bootstrap

まずは UI デザインを何となくいい感じに作ってくれる Android Bootstrap を使ってみましょう。具体的には Twitter Bootstrap でも使われている FontAwesome の 369 個のアイコンが使えるほか、何となくカッコイイボタンや画像を円形に切り取って表示するなどといった「なんかカッコイイデザイン」がサクッと作れるようになります。ノンデザイナーのかたにはとてもありがたいですね。

bootstrap01

アプリケーションプロジェクトで使えるようにするには、まずGitHub リポジトリから Clone してインポートしてアプリケーションプロジェクトから参照します。Gradle にも対応しているようなので、Android Studio でも難なく使うことができます。そしてリポジトリ内にある fontawesome-webfont.ttf ファイルをアプリケーションプロジェクトの assets フォルダにコピーして準備完了です。

bootstrap02

では早速レイアウトファイルに View を配置してみましょう。次のような View を使うことができます。

View 役割
com.beardedhen.androidbootstrap.BootstrapButton アイコン付きのボタンや角丸ボタン
com.beardedhen.androidbootstrap.FontAwesomeText FontAwesome を利用したアイコンとアニメーション
com.beardedhen.androidbootstrap.BootstrapEditText 入力テキスト
com.beardedhen.androidbootstrap.BootstrapThumbnail 枠付きのサムネイル画像
com.beardedhen.androidbootstrap.CircleThumbnail 枠付きの円形のサムネイル画像

それぞれの View を次のような感じで配置してみました。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bootstrap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- ボタン -->
    <com.beardedhen.androidbootstrap.BootstrapButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Success"
        bootstrap:be_roundedCorners="true"
        bootstrap:bb_icon_right="fa-android"
        bootstrap:bb_type="success" />

    <!-- テキスト(アイコン) -->
    <com.beardedhen.androidbootstrap.FontAwesomeText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textSize="32sp"
        bootstrap:fa_icon="fa-github" />

    <!-- 入力テキスト -->
    <com.beardedhen.androidbootstrap.BootstrapEditText
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:hint="rounded"
        bootstrap:be_roundedCorners="true"
        bootstrap:be_state="success" />

    <!-- サムネイル -->
    <com.beardedhen.androidbootstrap.BootstrapThumbnail
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        bootstrap:bt_height="80dp"
        bootstrap:bt_image="@drawable/image"
        bootstrap:bt_width="150dp" />

    <!-- サムネイル(円形) -->
    <com.beardedhen.androidbootstrap.BootstrapCircleThumbnail
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        bootstrap:bct_image="@drawable/image"
        bootstrap:bct_size="large" />

</LinearLayout>

実行するとこんな感じで表示されます!

bootstrap03

更に詳しい解説はこちらで述べられていますので、興味のある方は参照してください。

よく使うライブラリ群をまるっと使う

http://www.androidbootstrap.com/

次に、よく使いそうなライブラリをまとめて一気に新規プロジェクトとして生成してくれるお手軽プロジェクト作成ツールの Android Bootstrap を使ってみたいと思います。具体的には NavigationDrawer の実装や ViewPageIndicator などのような便利な UI 系ライブラリ、http-requestgoogle-gson といった便利なロジック系のライブラリなどが含まれます。含まれているライブラリは次の通りです。かなりいろいろつめ込まれています。

ライブラリ 機能
AppCompat ActionBar などの公式サポートライブラリ
ViewPageIndicator ViewPager にインジケータを付けるライブラリ
NineOldAndroids アニメーションのサポート
NavigationDrawer UI パターンである Drawer ナビゲーションの実装
Dagger DI コンテナ
ButterKnife View のインジェクション
Otto クラス間の Pub / Sub メッセージング
Robotium シナリオテストの自動化
maven-android-plugin リリースビルドの生成
http-request HTTP 通信処理の簡素化
google-gson JSON のパース処理の簡素化

それでは使ってみましょう。まずこちらにアクセスし、アプリ名とパッケージ名を入力して「Generate Your App」をクリックします。

bootstrap04

すると Zip ファイルがダウンロードできたと思います。これがプロジェクトファイルです。解凍すると Android Studio 用のプロジェクトフォルダになっているので、Android Studio でインポートします。Gradle のバージョンは v1.10 以上でなければいけない点だけ注意してください。

bootstrap05

ビルドが成功したら、まずは実行してみましょう。謎のログイン画面が表示されるはずです。

bootstrap06

これは実際に Android Bootstrap 側で用意してくれているテスト用の Web サーバーに対するログインが実装されています。ちなみにテスト用の Web サーバーは Parse が使われているようです(通信処理は Parse の SDK ではなく、http-request を使って処理されています)。テスト用のログインアカウントはユーザー名が「[email protected]」で、パスワードが「android」です。ログインしてみます。

bootstrap07

ログインしてみました。ViewPager で作られた画面が表示され、謎のユーザーリストが表示されています。これは実際にテスト用の Web サーバーに問い合わせて取得しています。つまり「Web サーバーに HTTP 通信して取得した JSON オブジェクトをパースして ListView に表示する」という実装がどのように行われているか理解するとともに、これを元に自分のサービス用の実装を作り始められるというわけですね。

左右の「News」と「Check In's」はニュースフィードとチェックインを想定した作りになっていて、こちらも単純なレコードの取得が行われています。

あと何故かタイマーがついています。このタイマーは Service を使った実装になっているので、Service を使った非同期処理を実装したいときの参考になります。

bootstrap08

クラス構成は結構入り組んだ感じになっていますが、中のクラスの処理はかなりシンプルなのでカスタマイズしやすいと思います。

bootstrap09

まとめ

ということで、Android アプリを爆速で開発するために使えそうな便利ツール(ライブラリ)の紹介でした。すべてを1から用意するのは大変なので、こういったライブラリで省略できるところは省略していきたいですね。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.